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About „Sigils - Battle For Raios" 

• Tablet only 

• MOBA / RPG 

• Realtime Multiplayer 



• PvE and PvP 

• Free To Play 
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The Evolution of the Visual Style 
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- Final Artwork - 


- Sketches & Adjustements - 


^ Spvmv\3 
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Champion Workflow 
- Black Alligator - 


- Color Options - 



High Resolution Sculpt 


- Low Resolution Model 


- Rendered Frames with Stroke and FX Effects - 


- Added Rig and Animations 
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A little history... 
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About Mobile GPUs 
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Mobile GPU Challenges 

• Low fill rate 

• High pixel count 

• Tile-based deferred rendering 

• Complicates resource management 

• Render target switches are expensive 

• OpenGL ES ^ , 

• Familiar, but not well suited ^Dper^L|ES. 
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Pre-rendered Sprites 

• Reduce Overdraw 

• Quads are very wasteful 

• Find outline 

• Using a convex hull algorithm 



• Tessellate smartly 

• "Greedy" algorithm 

• http: //WWW, humus, name 
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Pre-rendered Sprites 

• Reducing Memory 

• Only one frame is needed at a time 

• "Memory to memory streaming" 

• Frequently used frames are cached 

• Compression algorithm is important 

• DEFLATE vs. LZ4 
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Pre-rendered Sprites 

• GPU Texture Compression 

• Reliably reduces texture size 

• Net performance gain (!) 

• Visible artefacts on 2D images 

• Fragmented on mobile devices 

• PVRTC vs. ETC vs. S3TC 
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Pre-rendered Sprites 

• Color Quantization 

• Split image 

• Index texture: 18 

• Palette texture: RBGA8 

• Reassemble in Pixel Shader 

• Sample with point filtering 

• Use as index to sample in palette 

• 4 times for linear filtering 
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Pre-rendered Sprites 


// read indices 

float4 index = float4( tex2D(sourceTex, in.TexCoordO.xy) . r, 

tex2D(sourceTex, in.TexCoordO.zw) . r, 
tex2D(sourceTex, in.TexCoordl.xy) . r, 
tex2D(sourceTex, in.TexCoordl.zw) . r) ; 

// nudge indices to center of texel 

index = index * (palettewidth-1.0f)/palettewidth + 0. 5f/paletteWidth; 

// sample colors 

float4 textureColorO = tex2D(paletteTex, float2(index.x, pal etteindex)) ; 
float4 textureColorl = tex2D(paletteTex, float2(index.y, pal etteindex)) ; 
float4 textureColor2 = tex2D(paletteTex, float2(index.z, pal etteindex)) ; 
float4 textureColorS = tex2D(paletteTex, float2(index.w, pal etteindex)) ; 
// bilinear filtering 
float2 lerps = frac(ln .Texel Pos) ; 

float4 textureColorOl = lerpCtextureColorO, textureColorl, lerps. x); 
float4 textureColor23 = lerp(textureColor2, textureColorS, lerps.x); 
float4 textureColor = lerpCtextureColorOl, textureColor23, lerps. y); 

// and we’re done 
return textureColor; 
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Pre-rendered Sprites 


Original Image 



■ 


Quantized 



V 
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Pre-rendered Sprites 

• Dealing with Alpha 

• Reduces palette colors 

• Causes sporadic see through spots 

• Separate it! 

• Index texture: IA8 

• Palette texture: RGBA8 
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Pre-rendered Sprites 

Original Image Quantized + Alpha 
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Pre-rendered Sprites 

• Error Diffusion 

• Aka dithering 

• Many algorithms to choose from 

• Floyd-Steinberg seems most smooth 
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Pre-rendered Sprites 

Original Image Final Image 
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Pre-rendered Sprites 
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Post Processing 

• The traditional approach 

• Bloom to make things glow 

• Color Grading to make things moody 

• Vignette to soften the corners 

• Works everywhere, right? 

• Not quite... 

• ~30ms for post fx alone 
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Post Processing 

• Why so bad? 

• Low fill rate, high pixel count 

• Post FX are inherently full screen 

• Render target switching extremely costly 

• Zero benefits from tiled rendering 
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Post Processing 

• A simplified approach 

• Replace bloom with flares or particles 

• One pass for color correction 

• Scene is rendered to render target 

• Then composited into back buffer 

• Vignette on screen borders only 

• ~ 80 % faster than full screen 
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Scene composition 

• Combining 2D sprites with 3D objects 

• 2D sprites are sorted back to front 

• Doesn't work for 3D objects with depth 

• Use depth buffer instead 

• Render 3D object, write depth 

• Render 2D sprites, test depth 

• This leaves one issue... 
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Scene composition 
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Scene composition 
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background Ivl 2 (volcanos] 


light parallax movement 
tileable 


background Ivl 1 


vertical assets 


optional with collision 


background Ivl 3 (sky) 

strong parallax movement 
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Coming Soon! 

http://en.siails.aameforae.com 
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